<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover">
      <h1 class="banner-title">标签-{{tagList.tag}}</h1>
    </div>
    <!-- 标签列表 -->
    <v-card class="blog-container">
      <v-row>
        <v-col :md="6" >
          <a  @click="open(tagList)"> <div class="album-item">
            <a  @click="open(tagList)"><v-img class="album-cover" :src="tagList.img"/></a>
            <div class="album-wrapper">
              <div class="album-name">{{ tagList.title }}</div>
              <div class="album-desc">{{ tagList.category }}</div>
            </div>
          </div></a>
        </v-col>
      </v-row> <a  @click="open(tagList)"><el-button style="height:30px;border-radius: 20px;color: #fff!important;background: linear-gradient(41deg,#bf4643 0,#6c9d8f)">{{tagList.tag}}</el-button></a>
      <el-button style="height:30px;border-radius: 20px;color: #fff!important;background: linear-gradient(41deg,#bf4643 0,#6c9d8f)">{{tagList.flag===false?'私密':'公开'}}</el-button>
    </v-card>
  </div>
</template>

<script>
    import request from '../../utils/request'
    export default {
        created() {
            this.listTags();
        },
        data: function() {
            return {
                tagList: {},
                count: 0
            };
        },
        methods: {
            open(ids){
                let id=ids.id
                this.$router.push({
                    path:'/articles/',
                    query:{id:id}
                })

            },
            listTags() {
                let id = this.$route.query
                request.get('/article/query/' + id.id).then(res=>{
                    this.tagList = res.data
                    this.count = res.data.length;
                });
            }
        },
        computed: {
            cover() {
                return (
                "background: url(" +
                this.tagList.img +
                ") center center / cover no-repeat"
            );}
        }
    };
</script>

<style scoped>
  .tag-cloud-title {
    line-height: 2;
    font-size: 36px;
    text-align: center;
  }
  @media (max-width: 759px) {
    .tag-cloud-title {
      font-size: 25px;
    }
  }
  .tag-cloud {
    text-align: center;
  }
  .tag-cloud a {
    color: #616161;
    display: inline-block;
    text-decoration: none;
    padding: 0 8px;
    line-height: 2;
    transition: all 0.3s;
  }
  .tag-cloud a:hover {
    color: #03a9f4 !important;
    transform: scale(1.1);
  }
  .album-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #000;
    border-radius: 0.5rem !important;
  }
  .album-cover {
    position: relative;
    max-width: none;
    width: calc(100% + 1.25rem);
    height: 250px;
    opacity: 0.8;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(-10px, 0, 0);
    object-fit: cover;
  }
  .album-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8rem 2rem;
    color: #fff !important;
  }
  .album-item:hover .album-cover {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  .album-item:hover .album-name:after {
    transform: translate3d(0, 0, 0);
  }
  .album-item:hover .album-desc {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
  }
  .album-name {
    font-weight: bold;
    font-size: 1.25rem;
    overflow: hidden;
    padding: 0.7rem 0;
    position: relative;
  }
  .album-name:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: "";
    transition: transform 0.35s;
    transform: translate3d(-101%, 0, 0);
  }
  .album-desc {
    margin: 0;
    padding: 0.4rem 0 0;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(100%, 0, 0);
  }
</style>
